<!--
  @Descripttion:：企业端-面试邀约记录展示
  @Author：yejianbo
  @Date：2022年06月21日 01:20:45
-->
<template>
  <section>
    <div v-if="[2,3].indexOf(Number(item.status)) > -1">
      <div class="step-item">
        <!-- todo 创建时间 -->
        <el-card class="box-card">
          <div class="h1">发送面试邀约</div>
          <div class="title">面试时间</div>
          <div class="content">{{ item.inviteDate }}</div>
          <div class="title">面试地点</div>
          <div class="content">{{ item.inviteAddress }}</div>
          <div class="title">其他</div>
          <div
            v-if="item.inviteContent"
            class="content"
            v-html="item.inviteContent.replace(/\n/gm, '<br>')"
          />
          <div class="tips">
            <!-- todo 创建时间 -->
            {{ item.publisherName }}提交于{{ moment(item.createTime).format('yyyy-MM-DD HH:mm:ss') }}
          </div>
        </el-card>
      </div>
    </div>
    <!-- 学生确认邀约 -->
    <div v-if="[5,6,7,8].indexOf(Number(item.status)) > -1">
      <div class="step-item">
        <!-- todo 创建时间 -->
        <el-card class="box-card">
          <div class="h1">发送面试邀约</div>
          <div class="title">面试时间</div>
          <div class="content">{{ item.inviteDate }}</div>
          <div class="title">面试地点</div>
          <div class="content">{{ item.inviteAddress }}</div>
          <div class="title">其他</div>
          <div
            v-if="item.inviteContent"
            class="content"
            v-html="item.inviteContent.replace(/\n/gm, '<br>')"
          />
          <div class="tips">
            <!-- todo 创建时间 -->
            {{ item.publisherName }}提交于{{ moment(item.createTime).format('yyyy-MM-DD HH:mm:ss') }}
          </div>
        </el-card>
      </div>
      <div class="step-item">
        <el-card class="box-card">
          <div class="h1">确认邀约</div>
          <div class="tips">
            <!-- todo 更新时间 -->
            {{ item.studentName }}提交于{{ moment(item.updateTime).format('yyyy-MM-DD HH:mm:ss') }}
          </div>
        </el-card>
      </div>
    </div>
    <!-- 学生拒绝邀约 -->
    <div v-if="Number(item.status) === 4">
      <div class="step-item">
        <el-card class="box-card">
          <div class="h1">发送面试邀约</div>
          <div class="title">面试时间</div>
          <div class="content">{{ item.inviteDate }}</div>
          <div class="title">面试地点</div>
          <div class="content">{{ item.inviteAddress }}</div>
          <div class="title">其他</div>
          <div
            v-if="item.inviteContent"
            class="content"
            v-html="item.inviteContent.replace(/\n/gm, '<br>')"
          />
          <div class="tips">
            <!-- todo 创建时间 -->
            {{ item.publisherName }}提交于{{ moment(item.inviteDate).format('yyyy-MM-DD HH:mm:ss') }}
          </div>
        </el-card>
      </div>
      <div class="step-item">
        <el-card class="box-card">
          <div class="h1 red">拒绝邀约</div>
          <div class="title">拒绝原因：</div>
          <div
            v-if="item.feedback"
            class="content"
            v-html="item.feedback.replace(/\n/gm, '<br>')"
          />
          <div class="tips">
            <!-- todo 更新时间 -->
            {{ item.studentName }}提交于{{ moment(item.updateTime).format('yyyy-MM-DD HH:mm:ss') }}
          </div>
        </el-card>
      </div>
    </div>
  </section>
</template>

<script>
import { resumeStatus } from '@/utils/frontDataDict.js'
import moment from 'moment'
export default {
  // 组件名称
  name: 'InviteRecord',
  // 组件状态值
  data() {
    return {
      /**
       * 简历状态（新），resumeStatus（投递过程的工单状态）
 *  0 投递成功，企业未查看简历、
 *  1 企业已查看投递记录、
 *  2 已发送面试邀约、
 *  3 学生已查看 、
 *  4 已拒绝面试邀约、
 *  5 已确认面试邀约、
 *  6 学生已反馈，企业未反馈、
 *  7 企业已反馈，学生未反馈、
 *  8 都反馈，结束
       */
      // 投递记录的简历状态 0 未查看简历、1 已查看简历、2 已发送面试邀约、3 已确认面试邀约、4 已拒绝面试邀约、5 已面试反馈（企业）、6 已评价（学生）
      resumeStatus: resumeStatus,
      moment: moment,
      stepNum: 1,
      item: {
        studentName: '',
        phoneNumber: '',
        email: '',
        inviteDate: '',
        companyId: 0,
        companyName: '',
        publisherName: '',
        status: '',
        inviteContent: '',
        jobName: '',
        inviteWay: '',
        inviteAddress: '',
        inviteCoordinate: '',
        noticeItem: '',
        inviteResult: '',
        evaluation: '',
        feedback: '',
        id: 0,
        sendRecordId: 0,
        createTime: '',
        updateTime: ''
      }
    }
  },
  // 组件方法
  methods: {
    open(item) {
      this.item = item
    },
    returnStatuText(code) {
      if (!code) return '--'
      const hasitem = this.resumeStatus.find((item) => {
        return Number(item.value) === Number(code)
      })
      return hasitem ? hasitem.label : '--'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.step-item {
  position: relative;
  width: 100%;
  padding-left: 40px;
  padding-bottom: 30px;
  &:last-child:before {
    content: "";
    display: block;
    position: absolute;
    left: 12px;
    bottom: 0;
    top: 0;
    width: 16px;
    height: 16px;
    background: #4677b9;
    border-radius: 50%;
    overflow: hidden;
  }
  &:first-child:before {
    content: "";
    display: block;
    position: absolute;
    left: 12px;
    top: 0;
    bottom: auto;
    width: 16px;
    height: 16px;
    background: #4677b9;
    border-radius: 50%;
    overflow: hidden;
  }
  &:after {
    content: "";
    display: block;
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #4677b9;
  }
  &:last-child:after {
    background: transparent;
  }
  .date {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 22px;
    margin-bottom: 5px;
  }
  .h1 {
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 50px;
    color: #2f8efe;
  }
  .title {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 40px;
    padding-left: 20px;
  }
  .content {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 40px;
    padding-left: 20px;
  }
  .tips {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #b1b1b1;
    line-height: 37px;
    padding-left: 20px;
  }
  .red {
    color: #fe4e3d;
  }
}
</style>
